import React,{useState,useEffect} from 'react'
import { Link,useHistory,Route,Redirect,useRouteMatch} from 'react-router-dom';

//! react-router-dom 的hooks方法 
//! useHistory只拿history对象 useLocation  useRouteMath  useParams直接用match里面的params
const Home = (props) => {

    const {path,url}=useRouteMatch();

    const history=useHistory();
    console.log(history);

    //! 数组解构（按索引） 
    const [topics,setTopics]=useState([]);

    useEffect(() => {
        fetch("https://cnodejs.org/api/v1/topics")
            .then(res=>res.json())
            .then(res=>{
                res&&setTopics(res.data);
            })
            .catch(err=>{
                console.log(err)
            })
    }, [])

    return (
        <ul>
            <div style={{height:300}}>
                <Link to='/home/all'>全部</Link> 
                <Link to='/home/share'>分享</Link>
                <Link to='/home/good'>精华</Link>
                {/*//!首页有问题成了 //all  其它页面就没有问题 */}
                {/* <Link to={`${url}/all`}>全部</Link>
                //! 两种解决办法，一种是在子路由里改，但是只能看 全部 页面
                //! 另一种是在一级路由里改（加上home重定向），但是首页只能是/home了，没有 / 这种了
                <Link to={`${url}/share`}>分享</Link>
                <Link to={`${url}/good`}>精华</Link> */}
                <div>
                    {/*//! 子路由的路径要和父路由前面path一致,二级路由前面必须加上一个 /xx 和第一层路由一样 */}
                    <Route path='/home/all' render={()=><h1>全部</h1>}/>
                    <Route path='/home/share' render={()=><h1>分享</h1>}/>
                    <Route path='/home/good' render={()=><h1>精华</h1>}/>
                    <Redirect to='/home/all'/>{/* //! ???????????????????????????? 当被挂载时，将路由重定向为 to 属性指定的地址 */}
                    
                    {/* <Route path={`/${path}/all`} render={()=><h1>全部</h1>}/>
                    <Route path={`/${path}/share`} render={()=><h1>分享</h1>}/>
                    <Route path={`/${path}/good`} render={()=><h1>精华</h1>}/>
                    //! 第一种解决办法
                    <Redirect to={`/home/all`}/> */}
                </div>
            </div>
            {/* 方法二：js跳转 */}
            {                                               
                topics.map(item=><li onClick={()=>history.push(`/detail/${item.id}`)} key={item.id}>{item.title}</li>)
            }
            {/* 方法一：Link */}
            {/* {                                               //! 字符串加变量==>表达式——>大括号
                topics.map(item=><li key={item.id}><Link to={`/detail/${item.id}`}>{item.title}</Link></li>)
            } */}
        </ul>
        
    )
}

export default Home
